<template>
  <el-dialog class="dia-style" :title="title" :visible.sync="open" :close-on-click-modal="false">
    <el-form ref="formRef" :model="formData" :rules="rules" label-width="120px" @submit.native.prevent>
      <el-form-item style="display: none" prop="id">
        <el-input v-model="formData.id" />
      </el-form-item>
      <el-form-item style="display: none" prop="groupId">
        <el-input v-model="formData.groupId" />
      </el-form-item>
      <el-form-item style="display: none" prop="sort">
        <el-input v-model="formData.sort" />
      </el-form-item>
      <el-form-item label="枚举名称" prop="name">
        <el-input v-model="formData.name" maxlength="20" placeholder="请输入" />
      </el-form-item>
      <el-form-item label="枚举编码" prop="code">
        <el-input v-model="formData.code" maxlength="20" placeholder="请输入" />
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm">保 存</el-button>
      <el-button @click="cancel">取消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { addData, editData } from '@/api/specialProject/dict'

export default {
  props: {
    title: {
      type: String,
      default() {
        return '标题'
      },
    },
  },
  data() {
    return {
      // 是否显示弹出层
      formData: {},
      open: false,
      // 表单校验
      rules: {
        name: [
          {
            required: true,
            message: '请输入枚举名称',
            trigger: 'blur',
          },
        ],
        code: [
          {
            required: true,
            message: '请输入枚举编码',
            trigger: 'blur',
          },
        ],
      },
      isEdit: false,
    }
  },

  created() {},
  methods: {
    // 打开对话框
    show(e, item) {
      console.log(e, item)
      this.open = true
      this.isEdit = item
      this.resetForm()
      this.$nextTick(() => {
        if (this.isEdit) {
          this.setFormData('id', e.id)
          this.setFormData('groupId', e.groupId)
          this.setFormData('sort', e.sort)
          this.setFormData('name', e.name)
          this.setFormData('code', e.code)
        } else {
          this.setFormData('groupId', e.id)
          this.setFormData('name', null)
          this.setFormData('code', null)
        }
      })
    },
    /** 提交按钮 */
    async submitForm() {
      this.$refs['formRef'].validate((valid) => {
        if (valid) {
          console.log(this.formData, 'fff')
          if (this.isEdit) {
            // 编辑
            editData(this.formData).then((res) => {
              console.log(res)
              this.cancel()
            })
          } else {
            // 新增
            addData(this.formData).then((res) => {
              console.log(res)
              this.cancel()
            })
          }
        }
      })
    },
    /** formData赋值：处理响应式丢失 */
    setFormData(target, val) {
      this.$set(this.formData, target, val)
    },
    // 取消按钮
    cancel() {
      this.open = false
      this.$emit('close')
    },
    // 表单重置
    resetForm() {
      this.formData = {}
    },
  },
}
</script>

<style lang="scss" scoped>
.flexBox {
  display: flex;
  justify-content: flex-start;
}
</style>
